<template lang="pug">
.dashboard-gis-wrapper
  ul
    li(
      v-for="item in list"
      :class="{active: activeGis === item.name}"
      :key="item.label"
      @click="selectGIS(item)")
      i.iconfont(:class="`icon-${item.icon}`")
      | {{item.label}}
</div>
</template>

<script>
export default {
  name: 'dashboard-gis',
  props: {
    activeGis: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      list: [
        {name: 'point', label: '点选', icon: 'click'},
        {name: 'rect', label: '矩形', icon: 'rectangle'},
        {name: 'circle', label: '圆形', icon: 'circle'},
        {name: 'line', label: '拉线', icon: 'line'},
        {name: 'polygo', label: '多边形', icon: 'polygo'}
      ]
    }
  },
  methods: {
    selectGIS (val) {
      this.$emit('dashboardMapGis', val)
    }
  }
}
</script>

<style lang="sass" scoped>
.dashboard-gis-wrapper
  position: absolute
  bottom: 50%
  right: 72px
  min-height: 120px
  padding: 6px 15px
  background-color: rgba(255, 255, 255, 0.96)
  border-radius: 5px
  border: 1px solid #ccc
  box-shadow: 0px 0px 10px #dfdfdf
  z-index: 0
  ul
    li
      cursor: pointer
      line-height: 32px
      border-bottom: 1px solid #ccc
      &:hover, &.active
        color: #27a1f7
      &:last-child
        border-bottom: 0
      i
        margin-right: 12px
</style>
